<template>
  <div class="tabContent-Box">
    <el-row :gutter="4" type="flex" justify="start">
      <el-col :span="20">
        <treeselect
          :options="options"
          :disable-branch-nodes="true"
          placeholder="请选择活动课程"
          class="treeinput"
        />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px;">
      <el-col :span="4">
        <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
          <el-table-column prop="address" label="地址" ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      options: [
        {
          id: '1',
          label: '用户',
          children: [
            {
              id: '101',
              label: '用户二级',
              children: [
                {
                  id: '10101',
                  label: '用户三级'
                },
                {
                  id: '10102',
                  label: '用户三级级2'
                }
              ]
            },
            {
              id: '102',
              label: '用户二级2'
            }
          ]
        },
        {
          id: '2',
          label: '课程',
          children: [
            {
              id: '201',
              label: '课程二级'
            },
            {
              id: '202',
              label: '课程二级2'
            }
          ]
        },
        {
          id: '3',
          label: '运营',
          children: [
            {
              id: '301',
              label: '运营二级'
            },
            {
              id: '302',
              label: '运营二级2'
            }
          ]
        },
        {
          id: '4',
          label: '交易'
        },
        {
          id: '5',
          label: '教育云'
        },
        {
          id: '6',
          label: '微营销'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      treeData: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        },
        {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          },
          {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        },
        {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          },
          {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleFilter() { },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tabs__content {
  overflow: visible;
}
.tabContent-Box {
  height: 100%;
  min-height: 500px;
}
.treeinput {
  float: left;
  width: 300px;
  margin-right: 5px;
}
</style>
